<template>
	<view class="w-100">
		<view class="mt-8 flex-1 ml-3 row-ac" @click="toBack">
			<text class="iconfont icon-xiangzuo mr-1"></text>返回
		</view>
		<view class="flex-1 row">
			<view class="head-logo">
				<image :src="websiteInfo.Web_logo" mode=""></image>
			</view>
		</view>
		<view class="flex-1 mt-5 mx-7 row">
			<view class="">
				<view class="input-box row-ac">
					<view class="iconfont icon-shouji"></view>
					<view class="ml-3 input-item border-bottom">
						<input type="text" placeholder="手机号" v-model="loginQueryInfo.phone" value=""
							class="flex-1 py-3 px-2" />
					</view>
				</view>
				<view class="input-box row-ac mt-4">
					<view class="iconfont icon-shouji"></view>
					<view class="ml-3 input-item-tip border-bottom">
						<input type="text" placeholder="输入验证码" v-model="loginQueryInfo.smsCode" value=""
							class="flex-1 py-3 px-2" />
					</view>
					<view class="font-s-35 input-tip" @click="getCode" :disabled="disabled">
						{{ codeTime > 0 ? codeTime + 's' : '获取验证码' }}
					</view>
				</view>
				<view class="input-box row-ac mt-4">
					<view class="iconfont icon-mima"></view>
					<view class="ml-3 input-item border-bottom">
						<input :type="passwordType" placeholder="密码" v-model="loginQueryInfo.password" value=""
							class="flex-1 py-3 px-2" />
					</view>
					<view class="iconfont icon-yj ml-2" @click="tapShow"></view>
				</view>
				<view class="input-box row-ac mt-4">
					<view class="iconfont icon-yaoqing"></view>
					<view class="ml-3 input-item-tip border-bottom">
						<input type="text" placeholder="邀请码,非必填" v-model="loginQueryInfo.inviteId" value=""
							class="flex-1 py-3 px-2" />
					</view>
					<view class="input-tip font-s-35">填写邀请码</view>
				</view>
				<view class="flex-1 row mt-9">
					<view class="login-button row" @click="toRegister"
						:class="loginInput  == true ? 'login-button-bg2' : 'login-button-bg1'">注册</view>
				</view>
			</view>
		</view>
		<view class="flex-1 mt-6 row mx-3">
			<view class="row-ac">
				<view class="check-box mr-1 row text-white" :class="checkStatus == true ? 'bg-dark' : ''"
					@click="clickCheck">
					<view class="iconfont icon-gouxuan"></view>
				</view>
				<view class="font-s-3">阅读并同意<text class="font-w" @click="popupAgreement">《用户服务协议》</text>和<text
						class="font-w" @click="popupPolicy">《隐私政策》</text>
				</view>
			</view>
		</view>
		<leson-popup ref="lesonDialog" :popupStatu="lesonpopup" @statusChanged="handleStatusChanged">
			<view class="flex-1 py-3">
				<view class="flex-1 mx-3 row-ac">
					<view></view>
					<view @click="cloesPopup">关闭</view>
				</view>
				<view class="flex-1 mx-3 py-2">
					<scroll-view scroll-y class="flex-1  agreement-box">
						<view class="flex-1" v-if="agreementStatus == true">
							<view class="flex-1 row font-s-45 font-w">用户服务协议</view>
							<view class="flex-1 mt-3"><rich-text :nodes="websiteInfo.user_agreement"></rich-text>
							</view>
						</view>
						<view class="flex-1" v-if="privacyStatus == true">
							<view class="flex-1 row font-s-45 font-w">隐私政策</view>
							<view class="flex-1 mt-3"><rich-text :nodes="websiteInfo.privacy_statement"></rich-text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</leson-popup>
	</view>
</template>

<script>
	import lesonPopup from "@/components/leson-popup"
	import {
		registerUrl,
		smscodeUrl,
		websiteDetailUrl

	} from '@/api/index.js';
	import {
		formatRichText
	} from '@/utils/util';
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				loginQueryInfo: {
					username: '',
					password: '',
					phone: '',
					smsCode: '',
					inviteId: ''
				},
				codeTime: 0,
				showpassword: true,
				websiteInfo: '',
				userMarkId: '',
				checkStatus: false,
				lesonpopup: false,
				agreementStatus: false,
				privacyStatus: false,
			}
		},
		computed: {
			loginInput() {
				if (this.loginQueryInfo.username !== '' && this.loginQueryInfo.password !== '' && this.loginQueryInfo
					.phone !== '' && this.loginQueryInfo.smsCode !== '') {
					return true
				} else {
					return false
				}
			},
			disabled() {
				if (this.codeTime > 0) {
					return true;
				}
				return false;
			},
			passwordType() {
				return this.showpassword ? 'password' : 'text';
			}
		},
		onLoad(query) {
			this.getWebsiteDetail();
			if (query && query.q) {
				this.getWebsiteDetail();
				const params = decodeURIComponent(query.q);
				const match = params.match(/invitecode=(\w+)/);
				const invitecode = match ? match[1] : '';
				this.loginQueryInfo.inviteId = invitecode;
				uni.setStorage({
					key: 'userMarkId',
					data: invitecode
				});
			}
		},
		created() {
			this.userMarkId = uni.getStorageSync('userMarkId')
			if (this.userMarkId !== '') {
				this.loginQueryInfo.inviteId = this.userMarkId
			} else {
				this.loginQueryInfo.inviteId = ''
			}
		},
		methods: {
			getWebsiteDetail() {
				this.$R.get(websiteDetailUrl).then(res => {
					this.websiteInfo = res.data
					this.websiteInfo.user_agreement = formatRichText(res.data.user_agreement);
					this.websiteInfo.privacy_statement = formatRichText(res.data.privacy_statement);
				})
			},
			//手机表单验证
			validata() {
				//手机号正则
				var mPattern = /^1[3456789]\d{9}$/;
				//输出 true
				if (!mPattern.test(this.loginQueryInfo.phone)) {
					uni.showToast({
						title: '你输入的手机号不正确',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			toRegister() {
				this.loginQueryInfo.username = this.loginQueryInfo.phone
				if (!this.validata()) return;
				if (this.checkStatus == false) {
					uni.showModal({
						title: '服务协议和隐私政策',
						content: '请您务必审慎阅读、充分理解《服务协议》和《隐私政策》各条款，我们需要收集您的收货信息，便于给您发货。您可阅读用户协议、隐私政策、免责切议了解详细信息。如您同意，请点击“同意"开始接受我们的服务。',
						cancelText: '不同意',
						confirmText: '同意',
						success: (res) => { // 使用箭头函数
							if (res.confirm) {
								this.checkStatus = true
								this.$R.post(registerUrl, this.loginQueryInfo).then(res => {
									console.log(res);
									if (res.code == 200) {
										uni.showToast({
											title: '注册成功',
											icon: 'none'
										});

									} else if (res.code == 204) {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										});
									}
									if (res.msg == '注册成功') {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											});
										}, 1000);
									}
								})
							} else if (res.cancel) {
								return
							}
						}
					});
				} else {
					this.$R.post(registerUrl, this.loginQueryInfo).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '注册成功',
								icon: 'none'
							});

						} else if (res.code == 204) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						if (res.msg == '注册成功') {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						}
					})
				}

			},
			getCode() {
				//防止重复获取
				if (this.codeTime > 0) {
					return;
				}
				//验证手机号
				if (!this.validata()) return;
				this.$R.get(smscodeUrl, this.loginQueryInfo).then(res => {
					if (res.code == 400) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else if (res.code == 401) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else if (res.code == 204) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else if (res.code == 200) {
						this.codeTime = 60;
						let timer = setInterval(() => {
							if (this.codeTime >= 1) {
								this.codeTime--;
							} else {
								this.codeTime = 0;
								clearInterval(timer);
							}
						}, 1000);
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}

				})
			},
			popupPolicy() {
				this.lesonpopup = true
				this.agreementStatus = false
				this.privacyStatus = true
			},
			popupAgreement() {
				this.lesonpopup = true
				this.agreementStatus = true
				this.privacyStatus = false
			},
			tapShow() {
				this.showpassword = !this.showpassword
			},
			clickCheck() {
				this.checkStatus = !this.checkStatus
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
			},
			cloesPopup() {
				this.$refs.lesonDialog.close()
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.head-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #E4E4E4;
		margin-top: 68rpx;
		border: 1rpx solid #dee2e6;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}

	.input-box {
		.input-item {
			width: 388rpx;
		}

		.input-item-tip {
			width: 280rpx;
		}
	}

	.input-code-box {
		padding: 32rpx;
		margin: 25rpx 0;
		box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, .1);
		flex-direction: row;
		border-radius: 2.5rem;

		.code-box {
			width: 50%;
			color: #333333;
			border: none;

			input {
				flex: 1;
				text-align: left;
				font-size: 28rpx;
				padding-right: 10rpx;
				margin-left: 20rpx;
			}

		}

	}

	.login-button {
		width: 398rpx;
		height: 106rpx;
	}

	.login-button-bg1 {
		background-color: #E4E4E4;
	}

	.login-button-bg2 {
		background-color: #000;
		color: #fff;
	}

	.icon-yj {
		color: #999;
		font-size: 18px;
	}

	.check-box {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		border: 3rpx solid #333;

		.iconfont {
			font-size: 25rpx;
		}

	}

	.agreement-box {
		height: 1068rpx;
	}
</style>